window.addEventListener('load',function(){


 let  bq=document.getElementById('biaoqian');

let html1='';
let arr=[
         {
             n1:'全部',
         },
         {
            n1:'生活服务',
        },
        {
            n1:'交通地理',
        },   {
            n1:'充值缴费',
        },   {
            n1:'数据智能',
        },   {
            n1:'企业工商',
        },   {
            n1:'应用开发',
        },   {
            n1:'电子商务',
        },   {
            n1:'吃喝玩乐',
        },   {
            n1:'文娱视频',
        },   {
            n1:'免费接口大全',
        },   {
            n1:'短信',
        },
        {
            n1:'汽车',
        },{
            n1:'核验',
        },{
            n1:'最新发布',
        },{
            n1:'API私有化部署',
        },
]

arr.forEach(function(v){
    html1+=`<span zi2='${v.n1}' class='bder'>${v.n1}</span>`
})

bq.innerHTML=html1


let biaoqian=document.querySelectorAll('#biaoqian span');
// console.log(biaoqian);
let  zi=document.getElementById('zi');
let  zi1=document.getElementById('zi1');
biaoqian.forEach(function(v){
    // console.log(v);

    //3.注册事件
    v.addEventListener('click',function(){
        


        let cont=this.textContent;
   
        let keyw=this.getAttribute('zi2');
      
        zi.textContent=cont;
        zi1.placeholder=keyw;

    
        biaoqian.forEach(function(vv){
            vv.classList.remove('active')
        })
        this.classList.add('active');



   
    })
})

// console.log(biaoqian);





// 分页+数据渲染

let arr1=[
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    }, {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    }, {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
    {
        n1:'none',
        n2:'01',
        n3:'2021出行防疫政策指南',
        n4:'免费',
    },
    {
        n1:'block',
        n2:'02',
        n3:'身份证实名认证',
        n4:'￥0.2000/次',
    },    {
        n1:'none',
        n2:'03',
        n3:'天气预报',
        n4:'免费',
    },    {
        n1:'block',
        n2:'04',
        n3:'银行卡四元素校验',
        n4:'￥0.3360/次',
    },
]   
let lis=document.getElementById('list');

let kaishi=0;
let jiehsu=20;
let total=arr1.length;
console.log(total);

function  fanye(kaishi,jiehsu){

  let pg=arr1.slice(kaishi,jiehsu);
let html2='';
 
pg.forEach(function(v){
     
     html2+=`<div class="l1 fl"> 
     <span style='display:${v.n1};'>企业专用</span>
  <img src="./images/API_${v.n2}.jpg" alt="">    
  <P>${v.n3}</P>
  <p>${v.n4}</p>
  <input class="dn" type="button" value="申请数据"> </div>`;


})
lis.innerHTML=html2






}
fanye(kaishi,jiehsu);

// 分页点击事件
let prev=document.getElementsByClassName('prev');
let next=document.getElementsByClassName('next');
let   btn=this.document.querySelectorAll('.btn')
console.log(btn);



   btn.forEach(function(v){
       v.addEventListener('click',function(){

        

           let nowpage=this.textContent;
          
           if(nowpage==1){
              
           }
           else{
               kaishi=(nowpage-1)*jiehsu
           }
           kaishi=(nowpage-1)*jiehsu

 fanye(kaishi,nowpage*jiehsu)

       })
   



   })

   
  




let l1=document.querySelectorAll('.l1');
let ip=document.querySelectorAll('.l1 input');
// console.log(ip);
// console.log(l1);


 for(let i=0;i<l1.length;i++){
     l1[i].addEventListener('mouseover',function(){
         
         ip[i].style.display='block';
         
         l1[i].addEventListener('mouseout',function(){
            ip[i].style.display='none';
         })

       this.addEventListener('click',function(){
           window.location='API-details.html'
       })
           

     })
 }






 






})